<template>
  <div class="container page">
    <div class="header">
      <van-nav-bar
          title="积分明细"
          left-arrow
          @click-left="$router.back()"
      />
    </div>
    <div class="content">
      <van-pull-refresh class="pull-refresh" v-model="refresh" success-text="刷新成功" @refresh="onRefresh">
        <template #default>
          <van-list class="listcontainer" v-model="loading" :finished="(page - 1) * limit + list.length >= total" @load="onLoadPage">
            <div class="listItem" v-for="item in list" :key="item.id">
              <div class="itemLeft"><span class="name">{{ item.memo }}</span><span
                  class="time">{{ new Date(item.create_time * 1000).format("yyyy/MM/dd HH:mm") }}</span></div>
              <div class="flex"><span class="chargeStatus">{{ item.money }}</span></div>
            </div >
            <template #finished>
              没有更多数据了
            </template>
          </van-list>
        </template>
      </van-pull-refresh>
    </div>
    <div class="menucontainer"></div>
  </div>
</template>
<script>
import {getWalletChangeList} from "@api/User";

export default {
  name: "AccountDetailList",
  data: function () {
    return {
      total: 0,
      limit: 20,
      page: 1,
      list: [],
      loading: false,
      finished: true,
      refresh: false
    }
  },
  activated() {
    this.initList();
  },
  methods: {
    onRefresh: function () {
      setTimeout(() => {
        this.refresh = false;
        this.loading = false;
      }, 1000);
    },
    initList() {
      getWalletChangeList(this.limit, this.page).then(v => {
        this.page = 1;
        this.limit = 20;
        this.list = v.data.data;
        this.total = v.data.total;
      })
    },
    onLoadPage: function (){
      this.page++;
      getWalletChangeList(this.limit, this.page).then(v => {
        this.list = this.list.concat(v.data.data);
        this.total = v.data.total;
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.menucontainer .datetimepicker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fcf0fa
}

.menucontainer .datetimepicker .van-picker__columns {
  background-color: #fcf0fa
}

.menucontainer .datetimepicker .van-picker__mask {
  background: transparent
}

.menucontainer .datetimepicker .van-picker__toolbar {
  background-color: #f2f2f5
}

.menucontainer .datetimepicker .van-picker-column__item--selected {
  margin: auto;
  width: 100%;
  border-radius: 0;
  background-color: #f2f2f5
}

.menucontainer .datetimepicker .handleBox {
  padding-left: .53333rem;
  padding-right: .53333rem
}

.menucontainer .datetimepicker .handleBox .handleText {
  font-size: .42667rem
}

.menucontainer .datetimepicker .handleBox .confirmText {
  color: #fa59b5
}

.menucontainer .mask1 {
  background-color: rgba(0, 0, 0, .3)
}

.menucontainer .mask2 {
  background-color: rgba(0, 0, 0, .2);
  z-index: 12
}

.menucontainer .content {
  position: fixed;
  right: 0;
  top: 0;
  padding-left: .26667rem;
  padding-right: .26667rem;
  height: 100%;
  width: 80%;
  z-index: 10;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: #fff;
  background-color: #fcf0fa;
  box-shadow: .53333rem 0 .53333rem .53333rem hsla(0, 0%, 88.2%, .2)
}

.menucontainer .content .timeBox {
  padding-bottom: .53333rem
}

.menucontainer .content .timeBox .title {
  display: flex;
  height: 1.33333rem;
  justify-content: flex-start;
  align-items: center
}

.menucontainer .content .timeBox .title .titleText {
  font-size: .48rem
}

.menucontainer .content .timeBox .datetimepickerBtnBox {
  display: flex;
  flex-direction: row;
  justify-content: center
}

.menucontainer .content .timeBox .datetimepickerBtnBox .datetimepickerBtnDashes {
  display: flex;
  align-items: center;
  font-size: .42667rem;
  margin-left: 2%;
  margin-right: 2%
}

.menucontainer .content .timeBox .datetimepickerBtnBox .datetimepickerBtn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .16rem;
  height: .96rem;
  border: .02667rem solid #979799
}

.menucontainer .content .timeBox .datetimepickerBtnBox .datetimepickerBtn .datetimepickerBtnText {
  font-size: .42667rem
}

.menucontainer .content .lotteryBox {
  border-top: .02667rem solid #f2f2f5
}

.menucontainer .content .lotteryBox .title {
  display: flex;
  height: 1.33333rem;
  justify-content: flex-start;
  align-items: center
}

.menucontainer .content .lotteryBox .title .titleText {
  font-size: .48rem
}

.menucontainer .content .lotteryBox .lotteryWrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start
}

.menucontainer .content .lotteryBox .lotteryWrapper .lotteryItem {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .10667rem;
  height: .96rem;
  margin-bottom: 2%;
  margin-right: 2%
}

.menucontainer .content .lotteryBox .lotteryWrapper .lotteryItem .lotteryItemText {
  font-size: .37333rem;
  padding-left: .13333rem;
  padding-right: .13333rem
}

.menucontainer .content .lotteryBox .lotteryWrapper .itemLight {
  color: #fff;
  background: #fa59b5
}

.menucontainer .content .lotteryBox .lotteryWrapper .itemDefault {
  color: #979799;
  border: .02667rem solid #979799
}

.menucontainer .content .bottomBox {
  position: absolute;
  bottom: .53333rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}

.menucontainer .content .bottomBox .resetBtn {
  border: .02667rem solid #fa59b5
}

.menucontainer .content .bottomBox .resetBtn .bottomBtnText {
  color: #fa59b5
}

.menucontainer .content .bottomBox .confirmBtn {
  background-color: #fa59b5
}

.menucontainer .content .bottomBox .confirmBtn .bottomBtnText {
  color: #fcf0fa
}

.menucontainer .content .bottomBox .confirmBtn, .menucontainer .content .bottomBox .resetBtn {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: .58667rem;
  height: 1.17333rem;
  margin-left: .26667rem;
  margin-right: .26667rem
}

.menucontainer .content .bottomBox .confirmBtn .bottomBtnText, .menucontainer .content .bottomBox .resetBtn .bottomBtnText {
  font-size: .42667rem;
  font-weight: 500
}

.sidebar-slide-right-enter-from, .sidebar-slide-right-leave-to {
  opacity: 0;
  transform: translate(50%) !important;
  transition: transform .35s, opacity .35s
}

.sidebar-slide-right-enter-to, .sidebar-slide-right-leave-from {
  transition: transform .35s, opacity .35s
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%
}

.container .header {
  background: linear-gradient(270deg, #fff, #fff)
}

.container .header .nav {
  background-color: transparent
}

.container .header .nav .van-nav-bar__text {
  color: #fff
}

.container .content {
  height: calc(100% - 1.22667rem);
  overflow: auto;
  background: #f2f2f5
}

.container .content .listItem {
  display: flex;
  border-bottom: .02667rem solid #f2f2f5;
  flex-direction: row;
  justify-content: space-between;
  padding: .53333rem .21333rem
}

.container .content .listItem .name {
  font-size: .42667rem;
  color: #000;
  margin-bottom: .26667rem
}

.container .content .listItem .remake {
  font-size: .37333rem;
  color: #000;
  margin-bottom: .26667rem
}

.container .content .listItem .time {
  font-size: .37333rem;
  color: #979799
}

.container .content .listItem .flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center
}

.container .content .listItem .flex .chargeStatus {
  color: #dc2037;
  font-size: .42667rem;
  margin-right: .13333rem
}

.container .content .listItem .itemLeft {
  display: flex;
  flex-direction: column
}

.container .content .nodata {
  flex: 1;
  display: flex;
  height: 13.33333rem;
  justify-content: center;
  align-items: center
}

.container .content .nodata .nodataText {
  color: #7c7c7d;
  font-size: .48rem
}

</style>
